<!--
 * @Author: your name
 * @Date: 2021-08-26 18:50:05
 * @LastEditTime: 2021-08-28 16:18:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_study\src\views\order\OrderDetail.vue
-->
<template>
  <div class="order-detail-box">
    <nav-bar class="nav-bar">
      <template v-slot:center> 订单详情 </template>
    </nav-bar>
    <div class="order-status">
      <div class="status-item">
        <label>订单状态：</label>
        <span>{{ statusString }}</span>
      </div>
      <div class="status-item">
        <label>订单编号：</label>
        <span>{{ detail.order_no }}</span>
      </div>
      <div class="status-item">
        <label>下单时间：</label>
        <span>{{ detail.created_at }}</span>
      </div>

      <van-button
        v-if="detail.status == 1"
        @click="showPayFn"
        style="margin-bottom: 10px"
        color="#1baeae"
        block
        >去支付</van-button
      >
      <van-button
        v-if="detail.status == 2"
        @click="handleConfirmOrder"
        class="van-button"
        style="margin-bottom: 10px"
        color="#58D68D"
        block
        >确认订单</van-button
      >
    </div>
    <div class="order-price">
      <div class="price-item">
        <label>商品金额：</label>
        <span>{{ total + ".00" }}</span>
      </div>
      <div class="price-item">
        <label>配送方式：</label>
        <span>顺丰快递</span>
      </div>
    </div>

    <van-card
      v-for="item in detail.orderDetails.data"
      :key="item.id"
      :num="item.num"
      :price="item.price + '.00'"
      :desc="item.goods.description"
      :title="item.goods.title"
      :thumb="item.goods.cover_url"
    />

    <div style="width: 100%; height: 50px"></div>

    <van-popup
      v-model:show="showPay"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div :style="{ width: '90%', margin: '0 auto', padding: '50px 0' }">
        <van-grid :border="false" :column-num="2">
          <van-grid-item text="支付宝">
            支付宝二维码<br />
            <van-image width="150" height="150" :src="aliyun" />
          </van-grid-item>
          <van-grid-item text="微信支付">
            微信二维码<br />
            <van-image width="150" height="150" :src="wechat" />
          </van-grid-item>
        </van-grid>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ref, reactive, torefs, onMounted, computed, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Dialog, Toast } from "vant";
import {
  payOrder,
  payOrderStatus,
  getOrderDetail,
  confirmOrder,
  viewExpress,
} from "network/order";
import NavBar from "components/common/navbar/NavBar";
export default {
  components: { NavBar },
  name: "OrderDetail",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();

    const state = reactive({
      orderNo: "", //订单id
      detail: {
        orderDetails: {
          data: [],
        },
        status:0
      },
      showPay: false,
      aliyun:'',
      wechat:''
    });

    const init = () => {
      const { id } = route.query;
      state.orderNo = id;

      getOrderDetail(id).then((res) => {
        console.log(res);
        state.detail = res;
      });
    };

    onMounted(() => {
      Toast.loading({ message: "加载中。。。", forbidClick: true });
      init();
      Toast.clear;
    });

    const statusString = computed(() => {
      let status = ["", "已下单", "已支付", "等待发货", "确认收货", "超出时长"];

      return status[state.detail.status];
    });

    const total = computed(() => {
      let sum = 0;

      state.detail.orderDetails.data.forEach((item) => {
        sum += item.num * item.price;
      });

      return sum;
    });

    const showPayFn = () => {
      state.showPay = true;

      payOrder(state.orderNo, { type: "aliyun" }).then((res) => {
          state.aliyun = res.qr_code_url;
          console.log(res);
          console.log(state.aliyun);
        });
        
        //由于微信难以测试，所有使用阿里云
        payOrder(state.orderNo,{type:'aliyun'}).then(res=>{
            state.aliyun=res.qr_code_url
        })

        // 轮询查看
        const timer=setInterval(() => {
            payOrderStatus(state.orderNo).then(res=>{
                if(res=='2'){
                    clearInterval(timer)
                    state.showPay='false'
                    router.push({path:'/orderdetail',query:{id:state.orderNo}})
                }

            })
        }, 2000);
    };

    const handleConfirmOrder=()=>{
        Dialog.confirm({
            title:'是否确认订单'
        }).then(()=>{
            confirmOrder(state.orderNo).then(res=>{
                    Toast('确认成功')
                    init()
            })
        }).catch(()=>{

        })
    }

    const close=()=>{
        Dialog.close()
    }

    return {
      ...toRefs(state),
      statusString,
      total,
      showPayFn,
      handleConfirmOrder,
      close
    };
  },
};
</script>

<style scoped lang="scss">
.order-detail-box {
  text-align: left;
  background-color: #f7f7f7;
  .order-status {
    margin-top: 55px;
    .status-item {
      padding: 3px;
      label {
        font-size: 14px;
        color: #aab7b8;
      }
      span {
        font-size: 16px;
      }
    }
  }
  .order-price {
    margin-top: 40px;
    .price-item {
      padding: 3px;
      label {
        font-size: 14px;
        color: #aab7b8;
      }
      span {
        font-size: 16px;
      }
    }
  }
}
</style>